import { ProForm, ProFormCascader, ProFormSelect, ProFormText } from '@ant-design/pro-components';
import { Modal } from 'antd';
import { FormInstance } from 'antd/lib/form/Form';
import { useRef } from 'react';
import styles from '../style.less';
import { RoadItem, UpdateRoadItem } from '../types';
import { getTenantList } from '@/pages/Tenant/Tenant/service';
import { nestedCityCode } from '@/components/assets/nestedCityCode';

interface UpdateRoadProps {
  road: RoadItem;
  onSubmit: (values: UpdateRoadItem) => Promise<void>;
  onCancel: (flag?: boolean) => void;
  modalVisible: boolean;
  visibleHandler: (flag?: boolean) => void;
}

export default (props: UpdateRoadProps) => {
  const {
    onSubmit: handleUpdate,
    onCancel: handleUpdateModalVisible,
    modalVisible: updateModalVisible,
    road
  } = props;
  const formRef = useRef<FormInstance>();

  return (
    <Modal
      title="编辑路段"
      open={updateModalVisible}
      width={550}
      footer={null}
      centered
      onCancel={() => handleUpdateModalVisible(false)}
      afterClose={() => handleUpdateModalVisible(false)}
    >
      <ProForm<UpdateRoadItem>
        onFinish={(values) => handleUpdate(values)}
        formRef={formRef}
        className={styles.stepsAction}
        layout="vertical"
      >
        <ProFormText
          width={'xl'}
          name="id"
          label="路段id"
          initialValue={road.id}
          hidden={true}
        />

        <ProFormText
          width={'xl'}
          name="name"
          label="路段名称"
          placeholder="请输入"
          rules={[{ required: true, message: '请输入路段名称' }]}
          initialValue={road?.name}
        />

        <ProFormCascader
          label={'行政区域'}
          name="addressCode"
          placeholder="请输入"
          rules={[{ required: true, message: '请输入路段地址' }]}
          fieldProps={{
            fieldNames: { label: 'name', value: 'code', children: 'children' },
            showSearch: true,
            options: nestedCityCode,
          }}
          initialValue={road.address?.split("&")}
        />

        <ProFormSelect
          label={'所属用户'}
          showSearch
          name="tenant_id"
          params={{ page: 1, pageSize: 10 }}
          request={async (params, _props) => {
            const res: any = await getTenantList({ page: params.page, pageSize: params.pageSize });
            if (res)
              return res.data.map((item: { id: any; name: any }, _index: any) => {
                return {
                  value: item.id,
                  label: item.name,
                };
              });
          }}
          initialValue={road.tenant_id}
          // rules={[{ required: true, message: '请选择所属企业' }]}
          // placeholder="选择所属企业（如未找到目标企业，请先创建企业）"
        />

      </ProForm>
    </Modal>
  );
};
